<template>
  <view>
    <u-navbar back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#333" back-icon-color="#333">
      <view class="" slot="right" style="margin-right: 33rpx">
        <!-- <u-icon name="server-fill" label-pos="bottom" label="客服" label-size="22"></u-icon> -->
      </view>
    </u-navbar>
    <view class="" style="font-size: 34rpx; font-weight: bold; padding: 16rpx 61rpx">
      {{ list.order_status_text }}
    </view>
    <view class="" style="font-size: 28rpx; padding: 0rpx 61rpx" v-if="list.order_status == 1">
      {{ list.surplus_time }}
    </view>

    <view class="" style="display: flex; align-items: center; padding: 29rpx 20rpx; background: #fff; margin: 36rpx 28rpx; border-radius: 20rpx">
      <view class="">
        <image src="https://wenzhen.fuerle168.com/static/shop/map.png" mode="" style="width: 28rpx; height: 28rpx"></image>
      </view>
      <view class="" style="font-size: 28rpx; padding-left: 24rpx">
        <view class="">
          <text style="font-size: 30rpx; font-weight: bold">{{ list.receive_name }}</text>
          <text style="padding-left: 15rpx">{{ list.receive_mobile }}</text>
        </view>
        <view class="" style="width: 517rpx; padding-top: 15rpx">{{ list.receive_city }} {{ list.receive_details }}</view>
      </view>
    </view>

    <!-- 药品 -->
    <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" style="padding: 19rpx 17rpx; display: flex; align-items: center; justify-content: space-between">
        <view class="" style="font-size: 30rpx; display: flex; align-items: center">
          <view class="" style="width: 36rpx; height: 36rpx">
            <image src="https://wenzhen.fuerle168.com/static/shop/user/z4.png" mode="" style="width: 36rpx; height: 36rpx"></image>
          </view>

          <view class="" style="padding-left: 15rpx">
            {{ list.shop_name }}
          </view>
        </view>
      </view>

      <view class="" style="display: flex; align-items: center; padding-left: 15rpx" v-for="(m, n) in list.order_goods" :key="n">
        <image :src="img_url + m.specs_image" mode="" style="width: 176rpx; height: 176rpx; border-radius: 20rpx"></image>
        <view class="" style="" style="padding-left: 12rpx">
          <view class="" style="width: 350rpx; font-size: 28rpx">
            {{ m.goods_name }}
          </view>
          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding-top: 15rpx">
            <view class="" style="color: #e50014; font-weight: bold">
              <text style="font-size: 28rpx">￥</text>
              <text style="font-size: 38rpx">{{ m.specs_price }}</text>
              <!-- <text style="font-size: 28rpx;">90</text> -->
            </view>
            <view class="" style="font-size: 26rpx; color: #666666">x{{ m.goods_num }}</view>
          </view>
          <view
            class=""
            style="
              width: 106rpx;
              text-align: center;
              line-height: 36rpx;
              font-size: 22rpx;
              color: #e50014;
              height: 36rpx;
              background: #ffedee;
              border-radius: 4rpx;
              margin-left: 15rpx;
              margin-top: 15rpx;
            "
          >
            多买优惠
          </view>
        </view>
      </view>

      <view
        class=""
        style="margin: 45rpx 28rpx; border: 1rpx solid #e7e7e7; border-radius: 4rpx; font-size: 24rpx; line-height: 60rpx; height: 60rpx; text-align: center; color: #999"
      >
        非质量问题退货运费由退货人自费，不接受到付
      </view>

      <view class="" style="font-size: 28rpx; display: flex; justify-content: space-between; padding: 0 27rpx">
        <view class="" style="color: #666666">商品金额：</view>
        <view class="">￥{{ list.order_amount }}</view>
      </view>

      <!-- <view class="" style="font-size: 28rpx;display: flex;justify-content: space-between;padding: 40rpx 27rpx;">
				<view class="" style="color: #666666;">
					运费：
				</view>
				<view class="">
					￥26.90
				</view>
			</view> -->
      <view class="" style="font-size: 28rpx; display: flex; justify-content: space-between; padding: 40rpx 27rpx">
        <view class="" style="color: #666666">优惠券：</view>
        <view class="">
          <u-icon name="arrow-right" color="#444444" size="28" :label="'- ' + list.discount_amount" label-pos="left"></u-icon>
        </view>
      </view>
      <view class="" style="font-size: 28rpx; display: flex; justify-content: space-between; padding: 0rpx 27rpx; padding-bottom: 40rpx">
        <view class="" style="color: #666666">合计：</view>
        <view class="">￥{{ list.pay_amount }}</view>
      </view>
    </view>
    <view class="" style="margin: 0 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 45rpx">
      <view class="" style="padding: 28rpx; font-weight: bold; font-size: 30rpx">订单信息</view>
      <view class="" style="font-size: 26rpx; padding-left: 29rpx">订单编号: {{ list.order_no }}</view>
      <view class="" style="font-size: 26rpx; padding-left: 29rpx; padding-top: 15rpx">创建时间: {{ list.create_time_text }}</view>
    </view>
    <!-- 订单信息 -->
    <view class="" style="height: 110rpx"></view>

    <view
      class=""
      style="
        background: #fff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        height: 99rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: fixed;
        bottom: 0;
        width: 100%;
      "
      v-if="list.order_status == 1"
    >
      <view class="btn" @tap="show = true">取消订单</view>
      <view class="btn" style="margin-left: 22rpx" @tap="edit">修改地址</view>
      <view class="btn1" style="margin-left: 22rpx; margin-right: 28rpx" @tap="pay">立即付款</view>
    </view>

    <view
      class=""
      style="
        background: #fff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        height: 99rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: fixed;
        bottom: 0;
        width: 100%;
      "
      v-if="list.order_status == 4 && list.is_evaluate == 0"
    >
      <!-- <view class="btn">申请售后</view> -->
      <view class="btn" style="margin-left: 22rpx" @tap="lookwl">查看物流</view>
      <view class="btn1" style="margin-left: 22rpx; margin-right: 28rpx" @tap="pj">评价</view>
    </view>

    <view
      class=""
      style="
        background: #fff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        height: 99rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: fixed;
        bottom: 0;
        width: 100%;
      "
      v-if="list.order_status == 2"
    >
      <view class="btn" @tap="show = true">取消订单</view>
      <view class="btn1" style="margin-left: 22rpx; margin-right: 28rpx" @tap="edit">修改地址</view>
    </view>

    <view
      class=""
      style="
        background: #fff;
        box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.08);
        height: 99rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: fixed;
        bottom: 0;
        width: 100%;
      "
      v-if="list.order_status == 3"
    >
      <view class="btn" style="margin-left: 22rpx" @tap="lookwl">查看物流</view>
      <view class="btn1" style="margin-left: 22rpx; margin-right: 28rpx" @tap="take">确认收货</view>
    </view>
    <u-modal v-model="show" :content="content" :show-cancel-button="true" confirm-color="#E50014" @confirm="confirm"></u-modal>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      id: null,
      list: {},
      show: false,
      content: '你确认取消该订单吗？'
    };
  },
  //方法
  methods: {
    pj() {
      uni.navigateTo({
        url: '/shop/issue/issue?type=' + JSON.stringify(this.list)
      });
    },
    take() {
      this.api({
        url: '/api//shop/orderStatus',
        method: 'post',
        data: {
          order_id: this.id,
          type: 3
        }
      }).then((res) => {
        this.order();
      });
    },
    lookwl(e) {
      uni.navigateTo({
        url: '/shop/lookwl/lookwl?id=' + this.id
      });
    },
    order() {
      this.api({
        url: '/api//shop/orderDetails',
        method: 'post',
        data: {
          order_id: this.id
        }
      }).then((res) => {
        this.list = res.data;
      });
    },
    confirm() {
      uni.navigateTo({
        url: '/shop/cancel/cancel?id=' + this.id
      });
    },
    edit() {
      uni.navigateTo({
        url: '/shop/address/address?id=' + this.id
      });
    },
    pay() {
      uni.navigateTo({
        url: '/shop/cash/cash?id=' + this.id
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
    this.order();
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.btn {
  width: 168rpx;
  height: 62rpx;
  background: #ffffff;
  border: 1rpx solid #999999;
  border-radius: 31rpx;
  line-height: 62rpx;
  color: #666666;
  font-size: 28rpx;
  text-align: center;
}

.btn1 {
  width: 168rpx;
  height: 62rpx;
  background: #ffffff;
  border: 1rpx solid #e50014;
  border-radius: 31rpx;
  line-height: 62rpx;
  color: #e50014;
  font-size: 28rpx;
  text-align: center;
}
</style>
